<template name="signin">
  <div class="page auth">
    <nav>
      <div class="nav-group">
        <a href="#" class="js-menu nav-item"><span class="icon-list-unordered"></span></a>
      </div>
    </nav>

    <div class="content-scrollable">
      <div class="wrapper-auth">
        <h1 class="title-auth">Sign In.</h1>
        <p class="subtitle-auth" >Signing in allows you to view private lists</p>

        <form>
          {{#if errorMessages}}
            <div class="list-errors">
              {{#each errorMessages}}
                <div class="list-item">{{this}}</div>
              {{/each}}
            </div>
          {{/if}}

          <div class="input-symbol {{errorClass 'email'}}">
            <input type="email" name="email" placeholder="Your Email" />
            <span class="icon-email" title="Your Email"></span>
          </div>

          <div class="input-symbol {{errorClass 'password'}}">
            <input type="password" name="password" placeholder="Password" />
            <span class="icon-lock" title="Password"></span>
          </div>

          <button type="submit" class="btn-primary">Sign in</button>
        </form>
      </div>

      <a href="{{pathFor 'join'}}" class="link-auth-alt">Need an account? Join Now.</a>
    </div>
  </div>
</template>